<!-- contentChildren 不能查询到 -->
<lv-option
  class="lv-select-panel-origin"
  [class.hover]="
    (lvData.active || highlight || (lvVirtualScroll && lvIndex === lastVirtualScrollHoveredIndex)) && !lvData.selected
  "
  [lvDisabled]="lvData.disabled"
  [lvReadOnly]="lvData.readonly"
  [lvHoverDisabled]="lvData.hoverDisabled"
  [(lvSelected)]="lvData.selected"
  (lvSelectedChange)="optionSelectChange($event)"
>
  <!-- 自定义内容 -->
  <ng-container *ngIf="lvContentTemplate">
    <div class="lv-subselect-trigger">
      <ng-container
        *ngTemplateOutlet="lvContentTemplate; context: { $implicit: lvData.originData, index: lvIndex }"
      ></ng-container>
    </div>
  </ng-container>

  <!-- 默认 -->
  <div *ngIf="!lvContentTemplate" class="lv-subselect-trigger" lv-overflow lvTooltipPosition="right">
    <lv-highlight
      class="lv-subselect-trigger"
      [lvContent]="lvHighlightContent"
      [lvWholeStr]="lvData.label"
    ></lv-highlight>
  </div>

  <!-- 展开icon -->
  <i class="lv-select-more" lv-icon="lv-icon-arrow-next" *ngIf="!lvData.isLeaf"></i>

  <!--  禁用icon-->
  <i
    *ngIf="lvData.disabledTips"
    class="lv-select-disabled-icon"
    lv-icon="lv-icon-disabled"
    [lv-tooltip]="lvData.disabledTips"
    lvTooltipTheme="light"
  ></i>
</lv-option>

<!-- overlay -->
<ng-template #selectionPanelTpl>
  <div
    class="lv-select-panel lv-subselect-panel"
    [ngClass]="panelClass"
    [@showSubItem]="animationState"
    (@showSubItem.done)="onAnimationDone($event)"
  >
    <div
      class="lv-select-panel-content lv-subselect-panel-content"
      [class.lv-select-panel-small]="lvSize === 'small'"
      [class.lv-select-panel-default]="lvSize === 'default'"
      [class.lv-select-panel-large]="lvSize === 'large'"
      [style.maxHeight]="scrollY"
      (mouseenter)="_mouseenter()"
      (mouseleave)="_mouseleave()"
    >
      <!-- 数据列表 -->
      <ng-container *ngIf="!lvVirtualScroll; else scrollViewTpl">
        <ng-container *ngFor="let item of lvData?.children; trackBy: lvTrackBy">
          <ng-container *ngTemplateOutlet="contentItemTpl; context: { $implicit: item }"></ng-container>
        </ng-container>
      </ng-container>
    </div>
  </div>
</ng-template>

<!-- TODO: 冗余代码，优化 -->

<!-- 内容区 item template -->
<ng-template
  #contentItemTpl
  let-item
  let-index="index"
  let-count="count"
  let-even="even"
  let-odd="odd"
  let-first="first"
  let-last="last"
>
  <lv-subselect
    [lvData]="item"
    [lvScroll]="lvScroll"
    [lvVirtualItemSize]="lvVirtualItemSize"
    [lvVirtualMaxBuffer]="lvVirtualMaxBuffer"
    [lvVirtualMinBuffer]="lvVirtualMinBuffer"
    [lvHighlightContent]="lvHighlightContent"
    (lvSelectedChange)="itemSeletedChange($event)"
    #subSelect
  ></lv-subselect>
</ng-template>

<!-- TODO:虚拟滚动 -->
<ng-template #scrollViewTpl>
  <cdk-virtual-scroll-viewport
    class="lv-virtual-panel-content"
    [itemSize]="lvVirtualItemSize"
    [maxBufferPx]="lvVirtualMaxBuffer"
    [minBufferPx]="lvVirtualMinBuffer"
    [style.height]="scrollY"
    #scrollComponent
  >
    <!-- 控制子元素实例化 -->
    <ng-container
      *cdkVirtualFor="
        let item of lvData.children;
        let index = index;
        let count = count;
        let even = even;
        let first = first;
        let last = last;
        let odd = odd;
        trackBy: lvTrackBy;
        templateCacheSize: 0
      "
    >
      <ng-container
        *ngTemplateOutlet="
          contentItemTpl;
          context: { $implicit: item, index: index, count: count, even: even, first: first, last: last, odd: odd }
        "
      ></ng-container>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</ng-template>
